const changeInfo = {
    name:'ChangeInfo',
    template: `<div class="pr h100">
        <div class=" bdf1 w100 h100 bg">
            <div class="bgf flex title fs18 h45 lh45 pr c30 sp2 marb5 ">
                <div class=" ffh pdlr20 fs22 fsw1 " @click="backPersoninfo()"><i class="el-icon-back "></i></div>
                <div class="" >编辑资料</div>
            </div>
            <div class="mrtb10">
                <template v-for="(v,k,i) in ob" >
                    <div  class="bgf fs16 bdlast" v-if="k=='头像' || k=='姓名'||k=='昵称'||k=='性别'" @click="opModel(k)">
                        <div class="mrlr20 bd01m bbx flex pr lh50 " >
                            <span v-text="k" class="ff1 cont"></span><!--中文-->

                            <el-upload v-if="k=='头像'" 
                                class="avatar-uploader pa r0  br50 w40 h40 lh55 tbm"
                                :data="avatarDt"
                                name='file' 
                                action="/api/user/upimg"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img  :src="v" class="c605 pa r0  br50 w40 h40 lh55 tbm">
                                <i v-else class="el-icon-plus fs32 c3 hcm1"></i>
                            </el-upload>
                            <span class="c605 pa r0 fs09e " v-text="v" v-else ></span>
                        </div>
                    </div>
                </template>
            </div>
            <div class="mrtb10">
                <template v-for="(v,k,i) in ob" >
                    <div  class="bgf fs16 bdlast" v-if="k=='手机号' || k=='生日'||k=='爱好'||k=='身份证'"  @click="opModel(k,v)">
                        <div class="mrlr20 bd01m bbx flex pr lh50">

                            <span v-text="k" class="ff1 cont"></span><!--中文-->

                            <span class="c605 pa r0 fs09e " v-text="v"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <!--弹窗Avatar-->
        <!--<div :class="showA?'pa t0 wh100  bg178':'disn'" @click.self="showA = 0">
            <div class="mart03">
                <el-upload
                    class="avatar-uploader"
                    :data="avatarDt"
                    name='file' 
                    action="/api/user/upimg"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="w90 h90 disb br50">
                    <i v-else class="el-icon-plus fs32 c3 tbm"></i>
                </el-upload>
            </div>
        </div>-->
        <!--弹窗Birthday-->
        <div :class="showB?'pa t0 wh100  bgca':'disn'">
            <div class="pdlr10p bgca mart03">
                <div class="bgcc1 pdtb15">
                    <div class="marl20  cfff">
                        <div class="fs13 sp2 " @click="showYear=!showYear" v-text="calendar.year"></div>
                        <div class="fs22 sp2" v-text="selectedDay"></div>
                    </div>
                </div>
                <div :class="!showYear?'bgf':'disn'">
                    <div class="bgf h20"></div>
                    <div class="textc fs13 textc cp c07 fsw5 pdtb5">
                        <button type="button" aria-label="上个月" class="bdn fs12 cp c30 bg0 el-date-picker__prev-btn el-icon-arrow-left" @click="getPrevMonth"></button>
                        <!--<span role="button" class="fs13 textc cp c07 fsw5">2021 年</span>
                        <span role="button" class="fs13 textc cp c07 fsw5">3 月</span>-->
                        {{calendar.year}}年{{calendar.month}}月<span @click="backToday" class='hand' title="返回今天" v-if='showToday'>今</span>
                        <button type="button" aria-label="下个月" class="bdn fs12 cp c30 bg0 el-date-picker__next-btn el-icon-arrow-right" @click="getNextMonth"></button>
                    </div>
                    <div class="pdcalen">
                        <table cellspacing=0 cellpadding=0  class="w100 fs12 c30 lh25  is-week-mode">
                            <tbody>
                                <tr class="lh30 c60 fsw4"><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                                <tr v-for="(item,itemIndex) in calendar.dayList" :key='itemIndex'>
                                    <td v-for="(key,keyIndex) in item" :key='key.date' class="textc br50 lh20" :class="key.disable?'c60':'vih'" 
                                    @click="getBirthday(key.date)" style="padding:5px;">
                                        <div class="textc br50 hovbg60" __class="calendar.isDay == key.date?'bgcc16':''" style="width:20px;height:20px;" >
                                            <span>{{key.day}}</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div :class="showYear?'bgf ovy h252 lh28 c60 textc fs13 ':'disn'">
                    <!--<div v-for="(v,k) in 151" v-text="1950+k" @click="selectYear(1950+k)"></div>-->
                    <div v-for="(v,k) in years" v-text="v" @click="selectYear(v)"></div>
                </div>
                <div class="bgf cc18 textr pd15">
                    <span class="disi fs12 fsw4 pdl20" @click="notSave('生日')">取消</span>
                    <span class="disi fs12 fsw4 pdl20" @click="save(showYear?'year':'brith')">确定</span>
                </div>
            </div>
        </div>
        <!--弹窗Sex-->
        <div :class="showS?'pa t0 bg17 wh100 ':'disn'" _click="setSex(0)">
            <div class="bgf pa b0 w100 brlr15 textc c30 fs16 sp2 pdtb15">
                <div class="pdtb15" @click="setSex(1)">男</div>
                <div class="pdtb15" @click="setSex(2)">女</div>
                <div class="pdtb15" @click="setSex(0)">其他</div>
                <!--<div class="pdtb15 c60" @click="setSex(0)">取消</div>-->
            </div>
        </div>
        <!--弹窗Hobby-->
        <div :class="showH.showH?'pa t0 wh100 bg':'disn'">
            <div class="bgf flex title fs16 h45 lh45 pr c30 sp1 marb5 jusb pd010">
                <!--<div class="mask2" @click="notSave(showH.arg)">取消</div>-->
                <div class="mask2 pdlr10 fs22 fsw1" @click="notSave(showH.arg)"><i class="el-icon-back "></i></div>
                <div class="mask2" v-text="showH.arg"></div>
                <el-button type="info" round class="el-button fs12 w50 h30 tbm   bdn" :class="c_flog?'bgcoe cfff':'bg2 mask0'" @click="save(showH.arg)">确定</el-button>
            </div>
            <div class="h10"></div>
            <div class="bgf pd10 br5 bbx mrlr10">
                <textarea v-if="showH.arg == '爱好'" class="bbx w100 h101 lh20 fs15 bdn pdlr20" placeholder ='一句话介绍..' v-model="hobby" @focus="c_flog = 1" @blur="c_flog = 0"></textarea>
                <input v-else  class="bbx w100  lh25 fs15 bdn " placeholder ='输入..' v-model="hobby" @focus="c_flog = 1" @blur="c_flog = 0" />
            </div>
        </div>
    </div>`,
    data: function () { return{
        c_flog:'0',
        ob: {
            
        },
        showA:0,
        showB:0,
        showH:{showH:0,arg:''},
        showS:0,
        showYear:0,
        //
        calLoading:false,
        calendar:{//日历
            dayList:[],//二维数组，循环行，循环列
            prev:[],
            current:[],
            next:[],
            year:'',
            month:'',
            weeks:['一','二','三','四','五'],
            isDay:''//判断是否是'今天'
        },
        years: '',
        showToday:'',
        selectedDay:'',
        year:'',
        //
        hobby:'',
        hobbynosave:'',
        sexnosave:'',
        imageUrl: '',
        avatarDt:{}
    }},
    created() {
        let v=this;
        let years = [];
        let dt = new Date();
        let yy = dt.getFullYear();
        for(let i = 0; i < 100; i++) {
        	years.push(yy - i);
        }
        v.years = years;
        v.getUserInfo()
        //2
        v.backToday()
        console.log('dayList',v.calendar.dayList);
        console.log('isDay',v.calendar.isDay);
        // __message('console',100000)
    },
    methods: {
    	getUserInfo(){
    		let v= this
            let uri = '/api/user/info'
            let token = localStorage.getItem('token');
            console.log('info token',token);
            ajax({url:uri,method:'get',data:{token: token}}).then((r)=>{
                console.log('info r',r);
                if(r.code == 300){
                    console.log('ls',localStorage.token);
                        // localStorage.token = ''
                        // location.href='http://bsy.5niu.top/api/weixin/login?redirect_url=http://bsy.5niu.top/cuser/admin.html#/personinfo';
                }
                if(r.code == 200){
                	let ob = r.data;
                	let vob = {};
                	vob['头像'] = ob['avatar'];
		            vob['姓名'] = ob['username'];
		            vob['昵称'] = ob['nickname'];
		            vob['性别'] = ob.sex == '1' ? '男' : (ob.sex == '2' ? '女' : '其他'); // ob.sex;
		            vob['手机号'] = ob.phone;
		            vob['生日'] = ob['birthday'];
		            vob['爱好'] = ob['hobby'];
		            vob['身份证'] = ob['idcard'];
		            v.ob = vob;
                }
                console.log('get user info',r.code,v.ob,r.data);
            })
            if (0) {
		        let re0 = v.$route.query.ob
		        if(re0){
		            let ob = JSON.parse(re0);
		            let vob = {};
		            vob['头像'] = ob['头像']
		            vob['姓名'] = ob['姓名']
		            vob['昵称'] = ob['姓名']
		            vob['性别'] = ob.sex == '1' ? '男' : (ob.sex == '2' ? '女' : '其他');
		            vob['手机号'] = ''
		            vob['生日'] = ob['生日']
		            vob['爱好'] = ob['爱好']
		            vob['身份证'] = ob['身份证']
		            console.log('vob',vob)
		        }
		        let re  = JSON.parse(localStorage.getItem('ob'))
		        if(re)v.ob = re 
		
		        let r =  JSON.parse(re0)
		        v.ob['头像'] = r['头像']
	       }
    	},
        backPersoninfo(){
            let v = this
            v.$router.go(-1)
        },
        handleAvatarSuccess(res, file) {
            let v = this
            v.imageUrl = URL.createObjectURL(file.raw);

            
            console.log('file',file);
            console.log('res' ,res);
            console.log('avatarDt' ,v.avatarDt);
            //自动上传图片：1请求/api/user/upimg接口2返回信息以success函数取出
            if (res.code == 200){
                v.ob['头像'] = v.imageUrl
                v.updataInfo('avatar',res.data.path)
            } else {
                alert(res.msg || '上传失败.')
            }

            v.showA = 0
        },
        beforeAvatarUpload(file) {
            let v= this
            let re = localStorage.getItem('token')
            if(re)v.avatarDt.token = re
            //
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            // return isJPG && isLt2M;
            return isLt2M;
        },
        opModel(k,i){
            let v=this
            v.c_flog = 0
            if(k =='头像'){

            }else if(k =='生日'){
                v.year='';
                
                
                v.selectedDay = i;
                if(i && i.length) {
                	let dt = new Date(i);
                	if(dt.getFullYear) {
                		v.calendar.year = dt.getFullYear();
            			v.calendar.month = v.initDate(dt.getMonth()+1);
                	}
                }
                console.log('opModel',i,v.calendar.year,v.calendar.month);
                v.backToday();
                v.showB = !v.showB;
            }else if(k =='性别'){
                v.showS = !v.showS
            }else{
                v.showH.arg = k
                v.hobbynosave = v.ob[k]
                v.hobby = v.ob[k]
                v.showH.showH = !v.showH.showH

            }
        },
        setSex(sex){
            let v = this
            v.updataInfo('sex',sex);
            v.showS = 0;
        },
        updataInfo(k,value){
            let v= this
            let uri = '/api/user/edit'
            let token = ''
            let data= {}
            if(localStorage.getItem('token')){
                token = localStorage.getItem('token')
                data.token = token
            }
            if(k)data[k] = value
            console.log('updataInfo',data);

            ajax({url:uri,method:'POST',data:data}).then((r)=>{
            	console.log('updataInfo r',r.code,r.data)
            	/*
                if(r.code == 200){
                	__message('r.msg',2000);
                   	window.alert(r.msg)
                    localStorage.setItem('ob',JSON.stringify(v.ob))
                }else{
                   if(k == 'phone')window.alert(r.msg)
                   let re = JSON.parse( localStorage.getItem('ob'))
                   if(re)v.ob = re 
                }
                */
               	if(r.code == 200) {
               		// window.alert(r.msg);
               		__message(r.msg,3000,'cg')
               	}
                v.getUserInfo();
            }).catch((e)=>{
            	window.alert('保存失败，请稍后再试.');
                console.log('catch',e);
            })
        },
        notSave(arg){
            let v = this
            //1
            if(arg == '爱好'||arg =='手机号'||arg =='姓名'||arg =='昵称'||arg =='身份证'){//确定爱好
                v.ob[arg]= v.hobbynosave
                v.showH.showH = 0

            }
            //2
            else if(arg == '生日'){
                v.showB= 0

            }
        },
        save(arg){
            let v= this
            //1
            
            if(arg == '爱好' ||arg == '手机号'||arg == '昵称'||arg == '姓名'||arg == '身份证'){//确定爱好
                v.ob[arg]= v.hobby
                if(arg == '爱好'){
                    v.updataInfo('hobby',v.hobby)

                }else if(arg == '手机号'){
                    v.updataInfo('phone',v.hobby)

                }else if(arg == '昵称'){
                    v.updataInfo('nickname',v.hobby)

                }else if(arg == '姓名'){
                    v.updataInfo('username',v.hobby)

                }else if(arg == '身份证'){
                    v.updataInfo('idcard',v.hobby)

                }
                v.hobby = v.ob[arg]
                v.showH.showH = 0
            }
            //2
            if(arg == 'year'){//确定年
                v.year = v.year
                v.showYear = 0
                v.backToday() 
            }else if(arg == 'brith'){//确定生日
                v.ob['生日'] = v.selectedDay
                v.showB = 0;
                console.log('save',arg,v.selectedDay)
                v.updataInfo('birthday',v.ob['生日'])
            }
        },
        selectYear(k){
            let v = this
            v.year = k
            console.log('selectYear',k)
            v.backToday()

        },
        getBirthday(k){
            let v= this;
            console.log('getBirthday',k,v.calendar)
            if(k){
                k=k.split('-')
            }
            v.selectedDay = k[0]+'-'+k[1]+'-'+k[2]
        },
        
        //
        initDate(val){
            if(val < 10){
                return '0'+val;
            }else{
                return val;
            }
        },
        getLastDate(year,month){
            return new Date(year,month,0);
        },
        getmonthDays(){//获取上月 当前月和下月天数
            let v = this;
            let y = v.calendar.year;
            let m = v.calendar.month;
            let preYear;//上一年
            let preMonth;//上一月
            let nextYear;//下一年
            let nextMonth;//下一月
            v.calendar.current=[];
            v.calendar.prev=[];
            v.calendar.next=[];
            console.log('getmonthDays',v.calendar.year,v.calendar.month)
            // 当前月天数
            for(let i=1; i<=v.getLastDate(y,m).getDate(); i++){
                //date用于日期判断，day用于显示，flag用于状态判断
                v.calendar.current.push({date:y+'-'+m+'-'+v.initDate(i),day:i,timeList:[],disable:true});
            }

            /*上月*/
            let d=v.getLastDate(y,m - 1).getDate();//上月一共多少天
            preYear= m == 1 ?  y-1 : y;//当前月是1月，那么上一月的年份要-1
            preMonth= m == 1 ?  12 : v.initDate(parseInt(m)-1);//当前月是1月，那么上一月是12月
            for(let j=(v.getLastDate(y,m - 1).getDay()); j >= 0; j--){
                v.calendar.prev.push({date:preYear+'-'+preMonth+'-'+(d-j),day:d-j,timeList:[],disable:false});
            }

            /*下月*/
            nextYear= m == 12 ?  y+1 : y;//当前月是12月，那么下一月的年份要+1
            nextMonth= m == 12 ? '01' : v.initDate(parseInt(m)+1);//当前月是12月，那么下一月是1月
            for(let k=1; k <= 42- v.calendar.current.length - v.calendar.prev.length; k++){
                v.calendar.next.push({date:nextYear+'-'+nextMonth+'-'+v.initDate(k),day:k,timeList:[],disable:false});
            }
            v.calendar.dayList=[];

            // 数组合并
            let tempArr=v.calendar.prev.concat(v.calendar.current,v.calendar.next);
            // 数组分组，每7个一组
            for(let i = 0;i < tempArr.length; i+=7){
                v.calendar.dayList.push(tempArr.slice(i, i+7));
            }
        },
        getPrevMonth(){//上一月
            if(this.calendar.month != 1){
                this.calendar.month = this.initDate(--this.calendar.month);
            }else{
                this.calendar.month = 12;
                this.calendar.year = --this.calendar.year;
            }   
            this.getmonthDays();
            this.currentDay();
            this.$emit('on-click',0);
        },
        getNextMonth(){//下一月
            if(this.calendar.month < 12){
                this.calendar.month = this.initDate(++this.calendar.month);
            }else{
                this.calendar.month = '01';
                this.calendar.year = ++this.calendar.year;
            } 
            this.getmonthDays();
            this.currentDay();
            this.$emit('on-click',1);
        },
        currentDay(){//获取今天,高亮显示今天
            let that = this;
            let date = new Date();
            let y = that.calendar.year;
            let m = that.calendar.month;

            if(y === date.getFullYear() && m == date.getMonth()+1){//如果是当年当月
                that.calendar.isDay = y+'-'+m+'-'+that.initDate(date.getDate());//获取到今天的号数

            }else{
                that.calendar.isDay = -1;
                that.calendar.isDay = y+'-'+m+'-'+that.initDate(date.getDate());//获取到今天的号数
            }
            
        },
        backToday(){//返回今天
            let v=this;
            let d = new Date();
            v.calendar.year = v.calendar.year || d.getFullYear();
            v.calendar.month = v.calendar.month || v.initDate(d.getMonth()+1);
            if(v.year){
                v.calendar.year = v.year
            }
            v.currentDay();
            console.log('backToday currentDay',v.calendar.year, v.calendar.month)
            v.getmonthDays();
            if(v.calendar.isDay){
                let str = v.calendar.isDay
                if(str){
                	console.log('backToday',str)
                    str = str.split("-")
                    v.selectedDay = str[0]+'-'+str[1]+'-'+str[2]
                    v.year = str[0]
                }
            }
        }
        
    },
}
export default changeInfo